<template>
  <div class="mod-demo-echarts">
    <el-alert
      v-if="false"
      title="提示："
      type="warning"
      :closable="false">
      <div >
        <p class="el-alert__description"></p>
      </div>
    </el-alert>
    <el-row>
      <el-col :span="24"  align="right">

          <el-switch
          @change="changeStatus"
        style="display: block"
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="按接入机构统计"
        inactive-text="按登记中心统计">
      </el-switch>

      </el-col>
    </el-row>


    <el-row :gutter="20">

      <el-col :span="24"  v-if="true">
        <el-card>
          <div id="J_chartBarBox" class="chart-box" ></div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {

        chartBar: null,
        autoHeight: 400,
        value: true

      }
    },
    mounted () {

      this.initChartBar()

    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
      this.resize()

    },
    methods: {

      changeStatus(callback){
        if (this.value){
          this.initChartBar()
        }else{
          this.initChartBarDjzx()
        }
      },
      
      resize(){
        if (this.chartBar) {
          this.chartBar.resize({height:this.autoHeight})
        }
      },

      // 柱状图
      initChartBar () {
        if (this.chartBar){
          this.chartBar.showLoading();
        }

        this.$http({
              url: this.$http.adornUrl(`/bdc/bdcbusiness/echart/bar`),
              method: 'post',
              data: this.$http.adornData({

              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                var option = data.options
                
                this.chartBar.setOption(option)
                var len = option.yAxis.data.length;
                
                if (len && len > 0){
                  this.autoHeight = 400 * len
                }
                this.resize()
                window.addEventListener('resize', () => {
                  this.chartBar.resize()
                })
                
              } else {
                this.$message.error(data.msg)
              }
              if (this.chartBar){
                  this.chartBar.hideLoading();
                }
            })
        
      },

      initChartBarDjzx () {
        if (this.chartBar){
          this.chartBar.showLoading();
        }
    
        this.$http({
              url: this.$http.adornUrl(`/bdc/bdcbusiness/echart/bar/djzx`),
              method: 'post',
              data: this.$http.adornData({

              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                var option = data.options
                // this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
                this.chartBar.setOption(option)
                var len = option.yAxis.data.length;
                
                if (len && len > 0){
                  this.autoHeight = 400 * len
                }
                this.resize()
                window.addEventListener('resize', () => {
                  this.chartBar.resize()
                })
              } else {
                this.$message.error(data.msg)
              }
              if (this.chartBar){
                  this.chartBar.hideLoading();
               }
            })
        
      }
    }   
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      // min-height: 100px;
      width: 100%;
    }
  }
</style>
